import React, { PureComponent } from 'react';
import { connect } from 'dva';
import 'moment/locale/zh-cn';
import { XYAxisChartsC, SecondHeaderC } from '../../../../../../comps';

@connect(({ portfolioOptimizationM, loading }) => ({
  portfolioOptimizationM,
  loading,
}))
export default class YieldRiskC extends PureComponent {
  state = {
    id: undefined, //分析结果的唯一id
    seriesYield: null, //累计收益率
    xAxisYield: null, //累计收益率
    series: null, //回撤
    xAxis: null, //回撤
    seriesYearYield: null, //获取逐月年化收益率
    xAxisYearYield: null, //获取逐月年化收益率
  };

  componentDidMount() {
    const {
      data: {
        config: { dataSource = [] },
      },
    } = this.props;
    this.setState(
      {
        id: this.props.data.id,
      },
      () => {
        this.getCharts();
        this.getChartsYearYield();
        this.getChartsYield();
      },
    );
  }
  componentWillUnmount() {
    // 离开前清除models数据
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.data && this.state.id != nextProps.data.id) {
      //更新值
      this.setState(
        {
          id: nextProps.data.id,
        },
        () => {
          this.getCharts();
          this.getChartsYearYield();
          this.getChartsYield();
        },
      );
    }
  }
  //重置至初始化
  reset = () => {
    this.setState({
      id: undefined, //分析结果的唯一id
      seriesYield: null, //累计收益率
      xAxisYield: null, //累计收益率
      series: null, //回撤
      xAxis: null, //回撤
      seriesYearYield: null, //获取逐月年化收益率
      xAxisYearYield: null, //获取逐月年化收益率
    });
  };
  //累计收益率
  getChartsYield = () => {
    this.setState({
      seriesYield: null, //累计收益率
      xAxisYield: null, //累计收益率
    });
    this.props.dispatch({
      type: 'portfolioOptimizationM/getChartsYield',
      payload: {
        id: this.state.id,
      },
      callback: (msg, data) => {
        if (msg == 'success') {
          this.setState({
            seriesYield: data.series || [], //累计收益率
            xAxisYield: data.xAxis || [], //累计收益率
          });
        }
      },
    });
  };
  //回撤数据
  getCharts = () => {
    this.setState({
      series: null, //回撤
      xAxis: null, //回撤
    });
    this.props.dispatch({
      type: 'portfolioOptimizationM/getCharts',
      payload: {
        id: this.state.id,
      },
      callback: (msg, data) => {
        if (msg == 'success') {
          this.setState({
            series: data.series || [], //回撤
            xAxis: data.xAxis || [], //回撤
          });
        }
      },
    });
  };
  //逐月年化收益率
  getChartsYearYield = () => {
    this.setState({
      seriesYearYield: null, //逐月年化收益率
      xAxisYearYield: null, //逐月年化收益率
    });
    this.props.dispatch({
      type: 'portfolioOptimizationM/getChartsYearYield',
      payload: {
        id: this.state.id,
      },
      callback: (msg, data) => {
        if (msg == 'success') {
          this.setState({
            seriesYearYield: data.series || [], //逐月年化收益率
            xAxisYearYield: data.xAxis || [], //逐月年化收益率
          });
        }
      },
    });
  };

  render() {
    const { seriesYield, xAxisYield, series, xAxis, seriesYearYield, xAxisYearYield } = this.state;
    const dataZoom = {
      show: true,
      type: 'slider',
      left: 100,
      right: 100,
      start: 0,
      end: 100,
    };
    return (
      <div style={{ paddingTop: '10px' }}>
        <SecondHeaderC title={'累计收益率'} />
        <div className='chartsClass' style={{ paddingTop: '20px', paddingBottom: '10px', marginBottom: '20px' }}>
          <XYAxisChartsC
            series={seriesYield}
            xAxis={xAxisYield}
            height={455}
            yAxisUnit={['单位（%）', '']}
            dataZoom={dataZoom}
            toolTipDataFormat={[(value) => value + '%']}
            hasYAxisPosi={true}
          />
        </div>
        <SecondHeaderC title={'逐月年化收益率'} />
        <div className='chartsClass' style={{ paddingTop: '20px', paddingBottom: '10px', marginBottom: '20px' }}>
          <XYAxisChartsC
            series={seriesYearYield}
            xAxis={xAxisYearYield}
            height={455}
            yAxisUnit={['单位（%）', '']}
            dataZoom={dataZoom}
            toolTipDataFormat={[(value) => value + '%']}
          />
        </div>
        <SecondHeaderC title={'回撤'} />
        <div className='chartsClass' style={{ paddingTop: '20px', paddingBottom: '10px', marginBottom: '20px' }}>
          <XYAxisChartsC series={series} xAxis={xAxis} height={455} yAxisUnit={['单位（%）', '']} dataZoom={dataZoom} toolTipDataFormat={[(value) => value + '%']} />
        </div>
      </div>
    );
  }
}
